<template>
  <view class="xxm-common-header">
    <slot name="title">
      <text class="xxm-common-header__title">{{ title }}</text>
    </slot>
    <slot name="right">
      <text class="xxm-common-header-right__more">More+ </text>
    </slot>
  </view>
</template>

<script setup lang="ts">
  defineOptions({
    name: 'CommonHeader'
  });

  defineProps<{
    title: string;
  }>();
</script>

<style lang="scss" scoped>
  .xxm-common-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 62rpx;
    &__title {
      font-size: 36rpx;
      font-weight: 500;
    }

    &-right {
      &__more {
        color: #787878;
      }
    }
  }
</style>
